<template>
  <div class="container">
    <!--  作答详情  -->
    <div
      v-if="formatObj.finishTime"
      class="exam_content"
      :style="{ height: outHeight }"
      v-loading="loading"
    >
      <!--   题目列表   -->
      <div class="answer_sheet" v-if="showSheet">
        <div class="answer_sheet_title">
          <span>题目列表</span>
          <i
            @click="showSheet = false"
            class="el-icon-s-operation color_aqua"
          ></i>
        </div>
        <div class="sheet_question_list">
          <div
            v-for="(item, index) in formatObj.examPaperTitleList"
            :key="index"
          >
            <a @click="scrollToAnchor(item, 1)" class="sheet_question_item"
              >{{ item.title }}
              <span class="paperTitle ml10">共{{ item.topicNum }}题</span>
            </a>
            <!--     已提交       -->
            <div
              class="sheet_answer_collect"
              v-if="formatObj.passing == 2 || formatObj.passing == 0"
            >
              <div
                v-for="(childItem, childIndex) in item.topicList"
                :key="childIndex"
              >
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-if="childItem.topicType != 1 && childItem.topicType != 3"
                  :class="{ selected: childItem.userAnswer }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-if="childItem.topicType == 1"
                  :class="{ selected: childItem.multiAnswers.length > 0 }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-if="childItem.topicType == 3"
                  :class="{
                    selected:
                      childItem.multiAnswers &&
                      childItem.multiAnswers.length == childItem.optionCount &&
                      !childItem.multiAnswers.includes(''),
                  }"
                  class="sheet_answer_collect_item"
                >
                  {{ childItem.sort }}
                </div>
              </div>
            </div>
            <!--     答题详情       -->
            <div
              class="sheet_answer_collect"
              v-if="formatObj.passing != 2 && formatObj.passing != 0"
            >
              <div
                v-for="(childItem, childIndex) in item.topicList"
                :key="childIndex"
              >
                <!--   答错题    -->
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-if="childItem.right == 0"
                  class="sheet_answer_collect_item fail_select"
                >
                  {{ childItem.sort }}
                </div>
                <!--   答对题    -->
                <div
                  @click="scrollToAnchor(childItem, 2)"
                  v-if="childItem.right == 1"
                  class="sheet_answer_collect_item selected"
                >
                  {{ childItem.sort }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  试卷状态 已提交    -->
      <!-- <div
        class="submited_state_top bg_color_green"
        v-if="formatObj.passing == 2"
      >
        <img
          class="submited_img"
          src="@/assets/images/submited_img.png"
          alt=""
        />
        <div class="submited_text state_color_green">
          已提交考核！等待老师评分~
        </div>
      </div> -->
      <!--  试卷状态 未通过    -->
      <div
        class="submited_state_top bg_color_red"
        v-if="formatObj.passing == -1"
      >
        <img
          class="submited_img"
          src="@/assets/images/not_passed_img.png"
          alt=""
        />
        <div class="submited_text state_color_red">
          {{
            user.user ? user.user.nickName : ""
          }}未能通过考核抽查！他的分数为{{
            formatObj.score ? formatObj.score : "0"
          }}分
        </div>
        <!-- <el-button
                v-if="$route.query.type !== 'practice'"
                @click="sureExamApply"
                class="makeup_examination"
                type="danger"
                >申请补考
              </el-button> -->
      </div>
      <!--  试卷状态 未通过    -->
      <div
        class="submited_state_top bg_color_light_green"
        v-if="formatObj.passing == 1"
      >
        <img class="submited_img" src="@/assets/images/passed_img.png" alt="" />
        <div class="submited_text state_color_light_green">
          {{ user.user ? user.user.nickName : "" }}通过了考核抽查！他的分数为{{
            formatObj.score
          }}分
        </div>
      </div>
      <!--   main-top内容  答题   -->
      <div class="exam_content_top rela">
        <div class="title flex">
          {{ formatObj.title }}
        </div>
        <div class="flex">
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 10px 0 0 5px;
            "
          >
            姓名:{{ user.user ? user.user.nickName : "" }}
          </div>
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 10px 0 0 20px;
            "
          >
            账号:{{ user.user ? user.user.phoneNumber : "" }}
          </div>
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 10px 0 0 20px;
            "
          >
            及格分数:{{ formatObj.passingGrade ? formatObj.passingGrade : 0 }}分
          </div>
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 10px 0 0 20px;
            "
          >
            成绩:{{ scoreGot ? scoreGot : 0 }} /
            {{ formatObj.totalScore ? formatObj.totalScore : 0 }}
          </div>
        </div>
        <div
          style="
            font-size: 16px;
            font-weight: 500;
            color: #333333;
            margin: 3px 0 0 5px;
          "
        >
          大区-门店-岗位:{{
            user.regionSchoolPostNames
              ? user.regionSchoolPostNames.join(",")
              : ""
          }}
        </div>
        <i @click="showSheet = true" class="el-icon-s-operation abso"></i>
      </div>
      <div class="all_exam_connect" :style="{ height: inHeight }">
        <!--   main-connect内容   -->
        <div
          class="exam_list"
          v-for="(item, index) in formatObj.examPaperTitleList"
          :key="index"
        >
          <div :id="item.titleId" class="paperTitle_left">
            {{ item.title }}
            <span class="paperTitle"
              >(共{{ item.topicNum }}题，{{ item.score }}分)</span
            >
          </div>
          <div
            class="answer_question"
            v-for="(childItem, childIndex) in item.topicList"
            :key="childIndex"
          >
            <span :id="childItem.id">{{ childItem.sort }}</span
            >.
            <span class="question_type">{{
              topicType[childItem.topicType]
            }}</span
            >&nbsp;
            <span
              ><span
                style="white-space: pre-wrap"
                v-html="childItem.topicContent"
              ></span
              >({{ topicType[childItem.topicType] }},{{
                childItem.score
              }}分)</span
            >
            <div v-if="childItem.topicPic" class="topic_image">
              <el-image
                v-for="(
                  topicPicitem, topicPicindex
                ) in childItem.topicPic.split(',')"
                style="
                  width: auto !important;
                  height: 100px;
                  margin-right: 10px;
                  margin-bottom: 10px;
                "
                :src="topicPicitem"
                :key="topicPicindex"
                :preview-src-list="childItem.topicPic.split(',')"
              >
              </el-image>
            </div>
            <div class="item_answer">
              <!--    填空题部分        -->
              <div v-if="childItem.topicType == 3">
                <div
                  class="optionItem"
                  v-for="(optionItem, optionIndex) in childItem.optionCount"
                  :key="optionIndex"
                >
                  <span class="optionItem_label">{{ optionIndex + 1 }}.</span>
                  <el-input
                    disabled
                    @blur="uploadAnswer(childItem.topicType, childItem)"
                    clearable
                    @change="trimAnswer(childItem.multiAnswers[optionIndex])"
                    class="optionItem_answer"
                    type="text"
                    placeholder="请输入答案"
                    v-model="childItem.multiAnswers[optionIndex]"
                  >
                  </el-input>
                </div>
                <!--     回答和正确答案       -->
                <div>
                  <div v-if="!childItem.right">
                    <span class="fail_answered"
                      >回答错误{{ childItem.multiAnswers.join(" | ") }}</span
                    >
                    <!--                        <span class="right_answered"-->
                    <!--                          >正确答案：<span class="color_green">{{-->
                    <!--                            childItem.trueAnswer-->
                    <!--                          }}</span></span-->
                    <!--                        >-->
                    <span
                      class="right_answered"
                      v-if="childItem.scoreGot || childItem.scoreGot == 0"
                      >教师评分：<span class="color_green"
                        >{{ childItem.scoreGot }} 分</span
                      ></span
                    >
                  </div>
                  <div class="color_green" v-if="childItem.right">
                    恭喜你！ 答对了！
                    <!--                        <span class="color_black">正确答案：</span>{{ childItem.trueAnswer }}-->
                  </div>
                </div>
                <!--     试题解析 只有批改过的详情和老师批改能看       -->
                <div class="resolve_exam" v-if="formatObj.passing != 2">
                  <div
                    class="resolve_exam_label"
                    v-if="childItem.resolve || childItem.resolvePic"
                  >
                    试题解析：
                  </div>
                  <el-tag class="resolve_exam_value" v-if="childItem.resolve">
                    {{ childItem.resolve }}
                  </el-tag>
                  <div
                    style="display: flex; align-items: center; flex-wrap: wrap"
                    v-if="childItem.resolvePic"
                  >
                    <el-image
                      v-for="(
                        resolvePicitem, resolvePicindex
                      ) in childItem.resolvePic.split(',')"
                      style="
                        width: auto !important;
                        height: 100px;
                        margin-left: 10px;
                        margin-bottom: 10px;
                      "
                      :src="resolvePicitem"
                      :key="resolvePicindex"
                      :preview-src-list="childItem.resolvePic.split(',')"
                    >
                    </el-image>
                  </div>
                </div>
              </div>
              <!--    单选题部分        -->
              <el-radio-group
                disabled
                @change="uploadAnswer(childItem.topicType, childItem)"
                v-if="childItem.topicType == 0"
                v-model="childItem.userAnswer"
              >
                <el-radio
                  v-for="(answerItem, answerIndex) in childItem.topicOptionList"
                  :key="answerIndex"
                  :label="answerItem.label"
                >
                  {{ answerItem.label }}、{{ answerItem.optionValue }}
                </el-radio>
              </el-radio-group>
              <!--    多选题部分        -->
              <el-checkbox-group
                disabled
                @change="uploadAnswer(childItem.topicType, childItem)"
                v-if="childItem.topicType == 1"
                v-model="childItem.multiAnswers"
              >
                <el-checkbox
                  v-for="(answerItem, answerIndex) in childItem.topicOptionList"
                  :key="answerIndex"
                  :label="answerItem.label"
                  >{{ answerItem.label }}、{{ answerItem.optionValue }}
                </el-checkbox>
              </el-checkbox-group>
              <!--    判断题部分        -->
              <el-radio-group
                disabled
                @change="uploadAnswer(childItem.topicType, childItem)"
                v-if="childItem.topicType == 2"
                v-model="childItem.userAnswer"
              >
                <el-radio :label="'正确'">对</el-radio>
                <el-radio :label="'错误'">错</el-radio>
              </el-radio-group>
              <!--      简答题部分      -->
              <el-input
                @blur="uploadAnswer(childItem.topicType, childItem)"
                disabled
                v-if="childItem.topicType == 4 || childItem.topicType == 5"
                class="textarea"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 4 }"
                placeholder="请输入答案"
                v-model="childItem.userAnswer"
              >
              </el-input>
              <!--  附件    -->
              <div
                class="attachment"
                v-if="childItem.topicType == 4 || childItem.topicType == 5"
              >
                <div style="width: 50px">附图</div>
                <div class="pictures">
                  <!--     详情状态只可查看      -->
                  <div style="display: flex; flex-wrap: wrap">
                    <!--     有附图信息遍历展示        -->
                    <div
                      class="view_img"
                      v-for="(item, index) in childItem.echoFile"
                      :key="index"
                    >
                      <el-image
                        v-if="item.type == 1"
                        class="view_img_url"
                        :src="item.url"
                        :key="index"
                        :preview-src-list="[item.url]"
                      >
                      </el-image>
                      <div v-if="item.type == 2" class="video_box">
                        <img
                          class="video_img"
                          src="@/assets/images/video_img.png"
                          alt=""
                        />
                        <video-review
                          class="video_box"
                          ref="videoReview"
                          :videoSrc="item.url"
                        ></video-review>
                      </div>
                      <div
                        @click="lookFiles(item.url)"
                        v-if="item.type == 3 || item.type == 4"
                        class="other_box"
                      >
                        <i class="el-icon-document"></i>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="item.name"
                          placement="top"
                        >
                          <div class="other_text">
                            <span>{{ item.name }}</span>
                            {{
                              item.name.slice(
                                item.name.lastIndexOf("."),
                                item.name.length
                              )
                            }}
                          </div>
                        </el-tooltip>
                      </div>
                    </div>
                    <!--     没有附图信息        -->
                    <div v-if="childItem.echoFile.length == 0">
                      暂无附图信息
                    </div>
                  </div>
                </div>
              </div>
              <!--     回答和正确答案       -->
              <div
                class="mt_10 flex"
                v-if="childItem.topicType != 3 && childItem.topicType != 2"
              >
                <div
                  v-if="
                    !childItem.right &&
                    childItem.topicType != 4 &&
                    childItem.topicType != 5
                  "
                >
                  <span class="fail_answered"
                    >回答错误{{ childItem.userAnswer }}</span
                  >
                  <!--                      <span class="right_answered"-->
                  <!--                        >正确答案：<span class="color_green">{{-->
                  <!--                          childItem.trueAnswer-->
                  <!--                        }}</span></span-->
                  <!--                      >-->
                </div>
                <div
                  class="color_green"
                  v-if="
                    childItem.right &&
                    childItem.topicType != 4 &&
                    childItem.topicType != 5
                  "
                >
                  恭喜你！ 答对了！
                  <!--                      <span class="color_black">正确答案：</span>{{ childItem.trueAnswer }}-->
                </div>
                <div>
                  <span
                    class="right_answered"
                    :class="{
                      ml_0:
                        childItem.topicType == 4 || childItem.topicType == 5,
                    }"
                    v-if="childItem.scoreGot || childItem.scoreGot == 0"
                    >教师评分：<span class="color_green"
                      >{{ childItem.scoreGot }} 分</span
                    ></span
                  >
                </div>
              </div>
              <!--     回答和正确答案       -->
              <div class="mt_10 flex" v-if="childItem.topicType == 2">
                <div
                  v-if="
                    !childItem.right &&
                    childItem.topicType != 4 &&
                    childItem.topicType != 5
                  "
                >
                  <span class="fail_answered"
                    >回答错误{{
                      childItem.userAnswer == "正确" ? "对" : "错"
                    }}</span
                  >
                  <!--                      <span class="right_answered"-->
                  <!--                        >正确答案：<span class="color_green">{{-->
                  <!--                          childItem.trueAnswer-->
                  <!--                        }}</span></span-->
                  <!--                      >-->
                </div>
                <div
                  class="color_green"
                  v-if="
                    childItem.right &&
                    childItem.topicType != 4 &&
                    childItem.topicType != 5
                  "
                >
                  恭喜你！答对了！
                  <!--                      <span class="color_black">正确答案：</span>{{ childItem.trueAnswer }}-->
                </div>
                <div>
                  <span
                    class="right_answered"
                    v-if="childItem.scoreGot || childItem.scoreGot == 0"
                    >教师评分：<span class="color_green"
                      >{{ childItem.scoreGot }} 分</span
                    ></span
                  >
                </div>
              </div>
              <!--     试题解析 只有批改过的详情和老师批改能看      -->
              <div class="resolve_exam" v-if="formatObj.passing != 2">
                <div
                  class="resolve_exam_label"
                  v-if="childItem.resolve || childItem.resolvePic"
                >
                  试题解析：
                </div>
                <el-tag class="resolve_exam_value" v-if="childItem.resolve">
                  {{ childItem.resolve }}
                </el-tag>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                  "
                  v-if="childItem.resolvePic"
                >
                  <el-image
                    v-for="(item3, index3) in childItem.resolvePic.split(',')"
                    style="
                      width: auto !important;
                      height: 100px;
                      margin-left: 10px;
                      margin-bottom: 10px;
                    "
                    :src="item3"
                    :key="index3"
                    :preview-src-list="childItem.resolvePic.split(',')"
                  >
                  </el-image>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="!formatObj.finishTime"
      class="answer_content"
      :style="{ height: outHeight }"
      v-loading="loading"
    >
      <!--   main-top内容  答题   -->
      <div class="answer_content_top">
        <div class="title flex">
          {{ titleName }}
          <div
            style="
              font-size: 16px;
              font-weight: 500;
              color: #333333;
              margin: 3px 0 0 20px;
            "
          >
            总分:{{ formatObj.totalScore ? formatObj.totalScore : 0 }}分
            <span style="margin: 0 5px">|</span> 及格分数:{{
              formatObj.passingGrade ? formatObj.passingGrade : 0
            }}分
          </div>
        </div>
        <div class="middle">
          <span>{{ finishedNum }}/{{ examTotal }}</span>
          <div class="progress">
            <el-progress
              :show-text="false"
              color="#33bd99"
              define-back-color="#e5e5e5"
              :percentage="percentage"
            ></el-progress>
          </div>
          <div class="bg_orange">
            <img
              class="countdown_img"
              src="@/assets/images/countdown_img.png"
              alt=""
            />
            <div v-if="showDJS" class="countdown_txt">
              {{ timeDiff }}
            </div>
          </div>
          <!--   题目列表   -->
          <div class="answer_sheet">
            <div class="answer_sheet_title">
              <span>题目列表</span>
            </div>
            <div class="sheet_question_list">
              <div
                v-for="(item, index) in formatObj.examPaperTitleList"
                :key="index"
              >
                <div style="margin-bottom: 12px">
                  {{ item.title
                  }}<span class="paperTitle ml10">共{{ item.topicNum }}题</span>
                </div>
                <!--     作答详情       -->
                <div class="sheet_answer_collect">
                  <div
                    v-for="(childItem, childIndex) in item.topicList"
                    :key="childIndex"
                  >
                    <div
                      @click="jumpToDetail(childItem)"
                      v-if="
                        childItem.topicType != 1 && childItem.topicType != 3
                      "
                      :class="{ selected: childItem.userAnswer }"
                      class="sheet_answer_collect_item"
                    >
                      {{ childItem.sort }}
                    </div>
                    <div
                      @click="jumpToDetail(childItem)"
                      v-if="childItem.topicType == 1"
                      :class="{ selected: childItem.multiAnswers.length > 0 }"
                      class="sheet_answer_collect_item"
                    >
                      {{ childItem.sort }}
                    </div>
                    <div
                      @click="jumpToDetail(childItem)"
                      v-if="childItem.topicType == 3"
                      :class="{
                        selected:
                          childItem.multiAnswers &&
                          childItem.multiAnswers.length ==
                            childItem.optionCount &&
                          !childItem.multiAnswers.includes(''),
                      }"
                      class="sheet_answer_collect_item"
                    >
                      {{ childItem.sort }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="all_answer_connect" :style="{ height: inHeight }">
        <!--   main-connect内容   -->
        <div
          class="answer_list"
          v-for="(item, index) in answerExamData"
          :key="index"
        >
          <div :id="item.bigTitleId" class="paperTitle_left">
            {{ item.title }}
            <span class="paperTitle"
              >(共{{ item.topicNum }}题，{{ item.bigScore }}分)</span
            >
          </div>
          <div class="answer_question">
            <span :id="item.id">{{ item.sort }}</span
            >. <span class="question_type">{{ topicType[item.topicType] }}</span
            >&nbsp;
            <span
              ><span
                style="white-space: pre-wrap"
                v-html="item.topicContent"
              ></span
              >({{ topicType[item.topicType] }},{{ item.score }}分)</span
            >
            <div v-if="item.topicPic" class="topic_image">
              <el-image
                v-for="(topicPicitem, topicPicindex) in item.topicPic.split(
                  ','
                )"
                style="
                  width: auto !important;
                  height: 100px;
                  margin-right: 10px;
                  margin-bottom: 10px;
                "
                :src="topicPicitem"
                :key="topicPicindex"
                :preview-src-list="item.topicPic.split(',')"
              >
              </el-image>
            </div>
            <div class="item_answer">
              <!--    填空题部分        -->
              <div v-if="item.topicType == 3">
                <div
                  class="optionItem"
                  v-for="(optionItem, optionIndex) in item.optionCount"
                  :key="optionIndex"
                >
                  <span class="optionItem_label">{{ optionIndex + 1 }}.</span>
                  <el-input
                    @blur="uploadAnswer(item.topicType, item)"
                    clearable
                    @change="trimAnswer(item.multiAnswers[optionIndex])"
                    class="optionItem_answer"
                    type="text"
                    placeholder="请输入答案"
                    v-model="item.multiAnswers[optionIndex]"
                  >
                  </el-input>
                </div>
              </div>
              <!--    单选题部分        -->
              <el-radio-group
                @change="uploadAnswer(item.topicType, item)"
                v-if="item.topicType == 0"
                v-model="item.userAnswer"
              >
                <el-radio
                  v-for="(answerItem, answerIndex) in item.topicOptionList"
                  :key="answerIndex"
                  :label="answerItem.label"
                >
                  {{ answerItem.label }}、{{ answerItem.optionValue }}
                </el-radio>
              </el-radio-group>
              <!--    多选题部分        -->
              <el-checkbox-group
                @change="uploadAnswer(item.topicType, item)"
                v-if="item.topicType == 1"
                v-model="item.multiAnswers"
              >
                <el-checkbox
                  v-for="(answerItem, answerIndex) in item.topicOptionList"
                  :key="answerIndex"
                  :label="answerItem.label"
                  >{{ answerItem.label }}、{{ answerItem.optionValue }}
                </el-checkbox>
              </el-checkbox-group>
              <!--    判断题部分        -->
              <el-radio-group
                @change="uploadAnswer(item.topicType, item)"
                v-if="item.topicType == 2"
                v-model="item.userAnswer"
              >
                <el-radio :label="'正确'">对</el-radio>
                <el-radio :label="'错误'">错</el-radio>
              </el-radio-group>
              <!--      简答题部分      -->
              <el-input
                @blur="uploadAnswer(item.topicType, item)"
                v-if="item.topicType == 4 || item.topicType == 5"
                class="textarea"
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 4 }"
                placeholder="请输入答案"
                v-model="item.userAnswer"
              >
              </el-input>
              <!--  附件    -->
              <div
                class="attachment"
                v-if="item.topicType == 4 || item.topicType == 5"
              >
                <div style="width: 50px">附图</div>
                <div class="pictures">
                  <!--     做题状态可点击上传        -->
                  <div class="add_class">
                    <div @click="showDialog(item)" class="upload_new">
                      <i class="el-icon-plus"></i>
                      <div class="upload_txt">上传文件</div>
                    </div>
                    <div
                      class="view_img_local"
                      v-for="(fileItem, fileIndex) in item.echoFile"
                      :key="fileIndex"
                    >
                      <el-image
                        v-if="fileItem.type == 1"
                        class="local_img_url"
                        :src="fileItem.url"
                        :preview-src-list="[fileItem.url]"
                      >
                      </el-image>
                      <div v-if="fileItem.type == 2" class="local_video_box">
                        <img
                          class="video_img"
                          src="@/assets/images/video_img.png"
                          alt=""
                        />
                        <video-review
                          class="video_box"
                          ref="videoReview"
                          :videoSrc="fileItem.url"
                        ></video-review>
                      </div>
                      <div
                        @click="lookFiles(fileItem.url)"
                        v-if="fileItem.type == 3 || fileItem.type == 4"
                        class="local_other_box"
                      >
                        <i class="el-icon-document"></i>
                        <el-tooltip
                          class="fileItem"
                          effect="dark"
                          :content="fileItem.name"
                          placement="top"
                        >
                          <div class="other_text">
                            <span>{{ fileItem.name }}</span>
                            {{
                              fileItem.name.slice(
                                fileItem.name.lastIndexOf("."),
                                fileItem.name.length
                              )
                            }}
                          </div>
                        </el-tooltip>
                      </div>
                      <img
                        @click="delImg(fileIndex, item.topicType, item)"
                        class="close_img"
                        src="@/assets/images/close_img.png"
                        alt=""
                      />
                    </div>
                  </div>
                  <!--    本地上传和拍照录像弹框      -->
                  <el-dialog
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    :visible.sync="item.showDialogState"
                    title="上传方式"
                    width="528px"
                    append-to-body
                  >
                    <div class="upload_way">
                      <uploadFile
                        :hasSlot="true"
                        :maxNum="10"
                        :echo-file="item.echoFile"
                        :max-image-size="20"
                        :max-video-size="300"
                        @uploadFiles="uploadFiles($event, item.topicType, item)"
                      >
                        <div class="upload_way_left">
                          <div class="local_icon"></div>
                          <div class="local_txt">本地文件</div>
                        </div>
                      </uploadFile>
                      <div
                        @click="getAuthorized(item.topicType, item)"
                        class="upload_way_right"
                      >
                        <div class="local_icon"></div>
                        <div class="local_txt">拍照上传</div>
                      </div>
                    </div>
                  </el-dialog>
                  <!--       拍照录像弹框           -->
                  <el-dialog
                    @close="closeVideoDialog(item)"
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    :visible.sync="item.showCameraDialog"
                    title="拍照或录像上传"
                    width="1050px"
                    append-to-body
                  >
                    <div class="photo_way">
                      <div class="photo_way_left camera_outer">
                        <div style="position: relative">
                          <video
                            id="videoCamera"
                            :width="videoWidth"
                            :height="videoHeight"
                            autoplay
                          ></video>
                          <canvas
                            id="canvasCamera"
                            style="display: none"
                            :width="videoWidth"
                            :height="videoHeight"
                          ></canvas>
                          <div
                            v-if="showrecordedTime"
                            style="
                              position: absolute;
                              bottom: 10px;
                              width: 100%;
                              display: flex;
                              justify-content: center;
                            "
                          >
                            <div
                              style="
                                width: 44px;
                                height: 20px;
                                background: #e95756;
                                border-radius: 2px;
                                color: #fff;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 12px;
                              "
                            >
                              {{ countdownElement }}
                            </div>
                          </div>
                        </div>
                        <div class="photo_btns">
                          <!--       拍照按钮           -->
                          <el-tooltip
                            v-show="!showVideoSwitch"
                            effect="dark"
                            content="拍照"
                            placement="top"
                          >
                            <div
                              @click="setImage(item)"
                              class="camera_photo_icon"
                            ></div>
                          </el-tooltip>
                          <!--       录像按钮           -->
                          <el-tooltip
                            v-show="!showVideoSwitch"
                            effect="dark"
                            content="录像"
                            placement="top"
                          >
                            <div
                              @click="showVideoSwitch = true"
                              class="camera_shooting_icon"
                            ></div>
                          </el-tooltip>
                          <!--       开始录制           -->
                          <el-tooltip
                            effect="dark"
                            v-show="showVideoSwitch && !actRecordVideo"
                            content="开始录制"
                            placement="top"
                          >
                            <div
                              @click="startRecording(item)"
                              class="video_recording_icon"
                            ></div>
                          </el-tooltip>
                          <!--       结束录制           -->
                          <el-tooltip
                            effect="dark"
                            v-show="showVideoSwitch && actRecordVideo"
                            content="结束录制"
                            placement="top"
                          >
                            <div
                              @click="stopRecording"
                              class="video_recording_hover_icon"
                            ></div>
                          </el-tooltip>
                        </div>
                      </div>
                      <div class="photo_way_right">
                        <div
                          class="view_img_local"
                          v-for="(fileItem, fileIndex) in recordedFilesUrls"
                          :key="fileIndex"
                        >
                          <el-image
                            v-if="fileItem.type == 1"
                            class="local_img_url"
                            :src="fileItem.url"
                            :preview-src-list="[fileItem.url]"
                          >
                          </el-image>
                          <div
                            v-if="fileItem.type == 2"
                            class="recorded_video_box"
                          >
                            <img
                              class="video_img"
                              src="@/assets/images/video_img.png"
                              alt=""
                            />
                            <video-review
                              class="video_box"
                              ref="videoReview"
                              :videoSrc="fileItem.url"
                            ></video-review>
                          </div>
                          <img
                            @click="delRecordedFile(fileIndex)"
                            class="close_img"
                            src="@/assets/images/close_img.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="canel(item)">取 消</el-button>
                      <el-button type="primary" @click="submitFiles(item)"
                        >提 交</el-button
                      >
                    </span>
                  </el-dialog>
                  <div class="attachment_sugest">
                    照片和文件大小不可超过20MB，视频大小不可超过300M
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  提交按钮    -->
      <div class="btns_operation">
        <el-button plain @click="preQuestion" class="operation_btn"
          >上一题
        </el-button>
        <el-button @click="nextQuestion" class="operation_btn" plain
          >下一题
        </el-button>
        <el-button
          v-preventReClick
          @click="submitAnswer"
          class="operation_btn"
          type="primary"
          >提交
        </el-button>
      </div>
    </div>
  </div>
</template>
  
  <script>
import uploadFile from "@/components/uploadFile/uploadFile";
import videoReview from "@/components/videoReview/videoReview";
import { examApply, getExamApplyTimes, reStart } from "@/api/exam/actionExam";
import { base64ToFile } from "@/utils/base64ToFile";
import { uploadOSS } from "@/api/upload";
import { getPost_user } from "@/api/schoolOrganization/student";
export default {
  name: "examinationAnswer",
  components: {
    uploadFile,
    videoReview,
  },
  props: {
    user: {},
    examInfo: {
      type: [Object],
      default: {},
    },
    titleName: {
      type: [String],
      default: "",
    },
    loading: {
      type: [Boolean],
      default: true,
    },
    //倒计时时间
    endTime: {
      type: [String],
      default: "",
    },
    //是否为开始考试
    isAction: {
      type: [Boolean],
      default: false,
    },
    outHeight: {
      type: [String],
      default: "calc(100vh - 134px )",
    },
    inHeight: {
      type: [String],
      default: "calc(100vh - 294px )",
    },
  },
  watch: {
    examInfo: {
      deep: true,
      handler(val) {
        this.formatDataInfo(val);
        this.getUserInfo();
      },
    },
    answerExamData: {
      deep: true,
      handler(val) {
        this.calculation(val);
      },
    },
    endTime: {
      immediate: true,
      handler(val) {
        if (val) {
          let endtime = val - 0;
          this.updateTimeDiff(endtime);
          const diffInSeconds = (new Date(endtime) - new Date()) / 1000;
          if (diffInSeconds > 0) {
            this.timerDiff = setInterval(() => {
              this.updateTimeDiff(endtime);
            }, 1000);
          }
          this.showDJS = true;
        }
      },
    },
  },
  filters: {},
  data() {
    return {
      videoWidth: 640,
      videoHeight: 360,
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      mediaRecorder: null,
      recordedChunks: [],
      //录像按钮
      showVideoSwitch: false,
      actRecordVideo: false,
      //抓拍图片（base64格式文件）和视频文件暂存区
      recordedFilesUrls: [],
      //录制视频倒计时是否展示
      showrecordedTime: false,
      countdownInterval: null,
      //录制视频倒计时时间
      countdownElement: "00:30",

      showDJS: false,
      formatObj: {},
      percentage: 0,
      showSheet: false,
      answer: [],
      form: {
        branchPic: null,
      },
      vuecutshow: false,
      topicType: {
        0: "单选题 ",
        1: "多选题 ",
        2: "判断题",
        3: "填空题",
        4: "简答题",
        5: "操作题",
      },
      examTotal: 0,
      num: 0,
      finishedNum: 0,
      timerDiff: null,
      timeDiff: "",

      topicIndex: 0,
      answerExamData: [],
      tidyData: [],
    };
  },
  created() {},
  beforeDestroy() {
    clearInterval(this.timerDiff);
    if (this.thisVideo) {
      this.stopNavigator();
    }
  },
  methods: {
    /* 获取用户信息 */
    async getUserInfo() {
      let res = await getPost_user(this.$route.query.userId);
      this.user = res;
    },
    closeVideoDialog(childItem) {
      childItem.showCameraDialog = false;
      this.showVideoSwitch = false;
      this.actRecordVideo = false;
      this.recordedFilesUrls = [];
      this.showrecordedTime = false;
      this.countdownElement = "00:30";
      if (this.countdownInterval) {
        clearInterval(this.countdownInterval);
      }
      this.stopNavigator();
    },
    canel(childItem) {
      childItem.showCameraDialog = false;
      this.showVideoSwitch = false;
      this.actRecordVideo = false;
      this.recordedFilesUrls = [];
      this.stopNavigator();
    },
    async submitFiles(childItem) {
      this.showVideoSwitch = false;
      this.actRecordVideo = false;
      for (const recordedFilesUrl of this.recordedFilesUrls) {
        if (recordedFilesUrl.type == 1) {
          const base64Data = recordedFilesUrl.url.match(
            /data:image\/[^;]+;base64,([^">]+)/
          )[1];
          let file = base64ToFile(base64Data, "camera.png", "image/png");
          let res = await uploadOSS(file);
          let obj = {
            ...recordedFilesUrl,
            url: res[0],
          };
          childItem.echoFile.push(obj);
        }
        if (recordedFilesUrl.type == 2) {
          const file = new File([recordedFilesUrl.blob], "recorded-video.mp4", {
            type: "video/mp4",
          });
          let res = await uploadOSS(file);
          let obj = {
            ...recordedFilesUrl,
            url: res[0],
          };
          delete obj.blob;
          childItem.echoFile.push(obj);
        }
      }
      this.uploadAnswer(childItem.topicType, childItem);
      this.recordedFilesUrls = [];
      this.stopNavigator();
      childItem.showCameraDialog = false;
    },
    getAuthorized(topicType, childItem) {
      // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
      // 使用getUserMedia，因为它会覆盖现有的属性。
      // 这里，如果缺少getUserMedia属性，就添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = (constraints) => {
          // 首先获取现存的getUserMedia(如果存在)
          var getUserMedia =
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.getUserMedia;
          // 有些浏览器不支持，会返回错误信息
          // 保持接口一致
          if (!getUserMedia) {
            return Promise.reject(
              new Error("getUserMedia is not implemented in this browser")
            );
          }
          // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
          return new Promise(function (resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }

      var constraints = {
        audio: true,
        video: {
          width: this.videoWidth,
          height: this.videoHeight,
          transform: "scaleX(-1)",
        },
      };
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then((stream) => {
          childItem.showDialogState = false;
          childItem.showCameraDialog = true;
          this.$nextTick(() => {
            this.thisCancas = document.getElementById("canvasCamera");
            this.thisContext = this.thisCancas.getContext("2d");
            this.thisVideo = document.getElementById("videoCamera");

            this.thisVideo.srcObject = stream; // 直接使用 srcObject 分配媒体流
            this.setupMediaRecorder();
            this.thisVideo.onloadedmetadata = (e) => {
              this.thisVideo.play();
            };
          });
        })
        .catch((err) => {
          if (err.toString().indexOf("Could not start video source") > 0) {
            this.$modal.msgError("请检查设备是否有摄像头并且已打开");
          }
          if (err.toString().indexOf("Permission denied") > 0) {
            this.$modal.msgError("请授权浏览器访问摄像头和音频的权限");
          }
          console.log(err);
        });
    },
    //  绘制图片（拍照功能）
    async setImage(childItem) {
      if (childItem.echoFile.length + this.recordedFilesUrls.length > 9) {
        this.$modal.msgWarning("上传文件个数最多为10个！");
        return;
      }
      // 点击，canvas画图
      this.thisContext.drawImage(
        this.thisVideo,
        0,
        0,
        this.videoWidth,
        this.videoHeight
      );
      // 获取图片base64链接
      var image = this.thisCancas.toDataURL("image/png");

      let obj = {
        type: 1,
        name: `camera-img${this.recordedFilesUrls.length}`,
        url: image,
      };
      this.recordedFilesUrls.push(obj);
    },
    // 关闭摄像头
    stopNavigator() {
      this.thisVideo.srcObject.getTracks()[0].stop();
    },
    // 设置视频录制
    setupMediaRecorder() {
      const stream = this.thisVideo.srcObject;
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          this.recordedChunks.push(event.data);
        }
      };
    },
    // 开始录制
    startRecording(childItem) {
      if (childItem.echoFile.length + this.recordedFilesUrls.length > 9) {
        this.$modal.msgWarning("上传文件个数最多为10个！");
        return;
      }
      this.showrecordedTime = true;
      // 设置倒计时时长（以秒为单位）
      var countdownDuration = 29;
      // 开始倒计时
      this.countdownInterval = setInterval(() => {
        // 计算剩余时间（以分钟和秒钟为单位）
        var minutes = Math.floor(countdownDuration / 60);
        var seconds = countdownDuration % 60;
        // 格式化剩余时间
        var formattedTime =
          ("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2);
        // 更新倒计时显示
        this.countdownElement = formattedTime;
        // 减少剩余时间
        countdownDuration--;
        console.log(countdownDuration, "countdownDuration");
        // 当倒计时结束时，清除倒计时间隔
        if (countdownDuration < 0) {
          clearInterval(this.countdownInterval);
          this.countdownElement = "00:00"; // 倒计时结束时的显示
          this.stopRecording();
        }
      }, 1000);
      this.actRecordVideo = true;
      this.recordedChunks = [];
      this.mediaRecorder.start();
    },
    // 停止录制
    stopRecording() {
      this.actRecordVideo = false;
      this.showVideoSwitch = false;
      this.mediaRecorder.stop();
      this.mediaRecorder.onstop = () => {
        const blob = new Blob(this.recordedChunks, { type: "video/webm" });

        let url = URL.createObjectURL(blob);
        //type==1  图片类型文件，type==2视频类型文件
        let obj = {
          type: 2,
          blob: blob,
          name: `recorded-video${this.recordedFilesUrls.length}.webm`,
          url: url,
        };
        this.recordedFilesUrls.push(obj);
        this.showrecordedTime = false;
        if (this.countdownInterval) {
          this.countdownElement = "00:30";
          clearInterval(this.countdownInterval);
        }
      };
    },
    delRecordedFile(index) {
      this.recordedFilesUrls.splice(index, 1);
    },

    delImg(index, topicType, childItem) {
      childItem.echoFile.splice(index, 1);
      this.uploadAnswer(topicType, childItem);
    },
    showDialog(childItem) {
      childItem.showDialogState = true;
    },
    trimAnswer(item) {
      item = item.trim();
    },
    updateTimeDiff(endtime) {
      const diffInSeconds = (new Date(endtime) - new Date()) / 1000;
      if (diffInSeconds > 0) {
        let timeStr = diffInSeconds + "";
        if (timeStr.slice(0, timeStr.indexOf(".")) == 300) {
          if (this.num > 0) {
            return;
          }
          this.num++;
          this.$message({
            showClose: true,
            message: "请注意答题时间，还有5min将自动提交试卷~",
            type: "warning",
            duration: 5000,
          });
        }
        const minutes = Math.floor(diffInSeconds / 60);
        const seconds = Math.floor(diffInSeconds % 60);
        this.timeDiff = `${minutes.toString().padStart(2, "0")}:${seconds
          .toString()
          .padStart(2, "0")}`;
      } else {
        clearInterval(this.timerDiff);
        this.timeDiff = "00:00";
        // 如果页面再次刷新 进行判断是否考试过了
        if (this.formatObj.passing !== -1 && this.formatObj.passing !== 1) {
          this.finishAnswer();
        }
      }
    },
    lookFiles(url) {
      window.open(url);
    },
    async sureExamApply() {
      let res = await getExamApplyTimes(this.formatObj.id);
      if (res.data > 0) {
        this.$confirm(
          `确认申请补考吗？当前你的补考次数为${res.data}次`,
          "提示",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(async () => {
          let res = await examApply(
            this.formatObj.examId,
            this.$route.query.type == "onlineExam" ? 0 : 1
          );
          if (res) {
            this.$message.success("申请成功");
            this.$emit("refreshData");
            this.$router.go(-1);
          }
        });
      } else {
        let isThenExecuted = false;
        let isCatchExecuted = false;
        this.$confirm(`你已无补考机会,是否向老师申请一次补考机会?`, "提示", {
          confirmButtonText: "申请补考",
          cancelButtonText: "我要重修",
          type: "warning",
          distinguishCancelAndClose: true, // 重要，设置为true才会把右上角X和取消区分开来
        })
          .then(async () => {
            if (isThenExecuted) {
              return;
            }
            isThenExecuted = true;

            let res = await examApply(
              this.formatObj.examId,
              this.$route.query.type == "onlineExam" ? 0 : 1
            );
            if (res) {
              this.$message.success("申请成功");
              this.$emit("refreshData");
              this.$router.go(-1);
            }
          })
          .catch(async (e) => {
            console.log(e);
            if (e == "cancel") {
              // TODO 确认不通过执行逻辑
              if (isThenExecuted) {
                return false;
              }

              // 补考确认
              this.$confirm(`是否确认重修，重修会清空本课程学习记录?`, "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(async () => {
                  await reStart(
                    this.$route.query.courseSchedulingId,
                    this.$store.getters.studentId
                  );
                  this.$message.success("重修成功，请重新报名");
                  setTimeout(() => {
                    this.$router.replace({
                      path: "/course",
                    });
                  }, 1500);
                })
                .catch(() => {});
            } else if (e == "close") {
              // TODO 右上角X的执行逻辑
            }
          });
      }
    },
    //锚点跳转
    scrollToAnchor(item, type) {
      if (type == 1) {
        const anchor = document.getElementById(item.titleId);
        if (anchor) {
          anchor.scrollIntoView({ behavior: "smooth" });
        }
      } else {
        console.log(111, item.id);
        const anchor = document.getElementById(item.id);
        if (anchor) {
          anchor.scrollIntoView({ behavior: "smooth" });
        }
      }
    },
    //上传视频||图片
    uploadFiles(e, topicType, childItem) {
      childItem.echoFile = e;
      console.log(e, "e");
      console.log(childItem.echoFile, "e");
      console.log(topicType, childItem, "e");
      this.$forceUpdate();
      this.uploadAnswer(topicType, childItem);
    },
    //统计已做的题目
    calculation(val) {
      console.log(val, "valval");
      for (const examPaperElement of this.formatObj.examPaperTitleList) {
        if (examPaperElement.titleId == val[0].bigTitleId) {
          console.log(
            examPaperElement.titleId,
            val[0].bigTitleId,
            "val[0].bigTitleId"
          );
          for (let i = 0; i < examPaperElement.topicList.length; i++) {
            if (examPaperElement.topicList[i].id == val[0].id) {
              console.log(val[0]);
              examPaperElement.topicList[i] = val[0];
            }
          }
        }
      }
      let finishedNum = 0;
      //遍历各个大题里的小题  通过答案值来统计已经做了多少题目
      for (const examArrElementElement of this.tidyData) {
        //判断 是否有题目 topicContent!=''
        if (examArrElementElement.topicContent) {
          //判断类型   填空题examArrElementElement.topicType==3 需要 multiAnswers数组长度 == optionCount 且内容不能为''
          if (examArrElementElement.topicType == 3) {
            if (
              examArrElementElement.multiAnswers.length ==
              examArrElementElement.optionCount
            ) {
              if (!examArrElementElement.multiAnswers.includes("")) {
                finishedNum++;
              }
            }
          } else if (examArrElementElement.topicType == 1) {
            //判断类型   多选题examArrElementElement.topicType==1 需要 multiAnswers数组长度>0
            if (examArrElementElement.multiAnswers.length > 0) {
              finishedNum++;
            }
          } else {
            //判断类型   其他类型只需要判断 userAnswer有值就行
            if (examArrElementElement.userAnswer) {
              finishedNum++;
            }
          }
        }
      }
      this.finishedNum = finishedNum;
      this.percentage = (finishedNum / this.examTotal) * 100;
    },
    //格式化数据
    formatDataInfo(val) {
      let examInfo = this.examInfo;
      let examArr = examInfo.examPaperTitleList;

      let formatArr = [];
      //试题总数
      let examTotal = 0;
      //遍历各个大题
      for (const examArrElement of examArr) {
        //计算试题总数
        examTotal += examArrElement.topicNum;
        //格式化题目数组新增两个键值对  userAnswer用于存放单选题答案   multiAnswers用于存放多选题答案（以及填空题）
        //遍历各个大题里的小题
        let topicList = [];
        for (const examArrElementElement of examArrElement.topicList) {
          let obj;
          //判断作答的题目有没有缓存
          if (examArrElementElement.topicAnswer) {
            obj = {
              //原来的数据不动，新增两个字段用与存放答案
              ...examArrElementElement,
              userAnswer: examArrElementElement.topicAnswer.answer,
              multiAnswers: examArrElementElement.topicAnswer.multiAnswers
                ? examArrElementElement.topicAnswer.multiAnswers
                : [],
              echoFile: [],
              showDialogState: false,
              showCameraDialog: false,
            };
            if (examArrElementElement.topicAnswer.fileInfo) {
              obj.echoFile = JSON.parse(
                examArrElementElement.topicAnswer.fileInfo
              );
            }
          } else {
            obj = {
              //原来的数据不动，新增两个字段用与存放答案
              ...examArrElementElement,
              userAnswer: "",
              multiAnswers: [],
              echoFile: [],
              showDialogState: false,
              showCameraDialog: false,
            };
          }
          topicList.push(obj);
        }
        let object = {
          ...examArrElement,
          topicList: topicList,
        };
        formatArr.push(object);
      }
      let formatObj = {
        ...examInfo,
        examPaperTitleList: formatArr,
      };
      this.formatObj = formatObj;
      console.log("this.formatObj", this.formatObj);
      this.examTotal = examTotal;
      if (!this.formatObj.finishTime) {
        this.tidyUpData();
      }
    },
    uploadAnswer(topicType, item) {
      let ccExamPaperTopicAnswerReq;
      //多选题
      if (topicType == 1) {
        let arr = item.multiAnswers;
        if (arr.length == 0) {
          return;
        }
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer.trim(),
        };
      } else if (topicType == 3) {
        //填空题
        let arr = item.multiAnswers;
        if (arr.length == 0) {
          return;
        }
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer,
        };
      } else if (topicType == 4) {
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer.trim(),
          fileInfo:
            item.echoFile.length > 0 ? JSON.stringify(item.echoFile) : "",
        };
      } else if (topicType == 5) {
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer.trim(),
          fileInfo:
            item.echoFile.length > 0 ? JSON.stringify(item.echoFile) : "",
        };
      } else {
        ccExamPaperTopicAnswerReq = {
          ...item,
          examPaperTopicId: item.id,
          answer: item.userAnswer.trim(),
        };
      }
      this.$emit("submitSingleAnswer", ccExamPaperTopicAnswerReq);
    },
    submitAnswer() {
      this.$confirm(
        `${
          this.examTotal != this.finishedNum ? "还有题目未完成," : ""
        }确定要提交吗？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.sureSubmitAnswer();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
            showClose: true,
          });
        });
    },
    sureSubmitAnswer() {
      clearInterval(this.timerDiff);
      this.$emit("finshAnswerPaper", this.formatObj.id);
    },
    finishAnswer() {
      if (this.isAction) {
        this.$message({
          showClose: true,
          message: "考试时间结束，已自动提交试卷~",
          type: "warning",
        });

        // 如果页面再次刷新 进行判断是否考试过了
        if (this.formatObj.passing !== -1 && this.formatObj.passing !== 1) {
          clearInterval(this.timerDiff);
          this.$emit("finshAnswerPaper", this.formatObj.id);
        }
      }
    },

    tidyUpData() {
      let arr = [];
      for (const examPaperItem of this.formatObj.examPaperTitleList) {
        for (const topicItem of examPaperItem.topicList) {
          delete examPaperItem.sort;
          let obj = {
            ...topicItem,
            title: examPaperItem.title,
            bigTitleId: examPaperItem.titleId,
            bigScore: examPaperItem.score,
            topicNum: examPaperItem.topicNum,
          };
          arr.push(obj);
        }
      }
      this.tidyData = arr;
      if (this.examTotal > 0) {
        this.handleExamData(this.topicIndex);
      }
    },
    jumpToDetail(item) {
      for (let i = 0; i < this.tidyData.length; i++) {
        if (item.id == this.tidyData[i].id) {
          this.topicIndex = i;
        }
      }
      this.handleExamData(this.topicIndex);
    },

    //根据下标处理当前考试题目的数据
    handleExamData(topicIndex) {
      this.answerExamData = [this.tidyData[topicIndex]];
    },
    //上一题
    preQuestion() {
      if (this.topicIndex == 0) {
        return;
      }
      this.topicIndex--;
      this.handleExamData(this.topicIndex);
    },
    // 下一题
    nextQuestion() {
      if (this.topicIndex + 1 == this.tidyData.length) {
        return;
      }
      this.topicIndex++;
      this.handleExamData(this.topicIndex);
    },
  },
};
</script>
  
  <style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px 0;
  box-sizing: border-box;
  background: #f5f6f7;

  .exam_content {
    width: 1200px;
    border-radius: 16px;
    background: #ffffff;
    position: relative;

    .answer_sheet {
      width: 344px;
      box-shadow: 0 6px 14px 0 rgba(0, 55, 49, 0.1);
      border-radius: 0 16px 0 0;
      background: white;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;

      &_title {
        display: flex;
        justify-content: space-between;
        padding: 24px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #f2f3f4;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .sheet_question_list {
        height: 60vh;
        overflow: auto;
        padding: 32px 24px;
        box-sizing: border-box;
        background: white;

        .sheet_question_item {
          display: inline-block;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 12px;
        }
      }
    }

    &_top {
      border-radius: 16px 16px 0 0;
      border-bottom: 1px solid #f1f3f3;
      padding: 24px 24px 10px 24px;
      box-sizing: border-box;
      width: 100%;

      .title {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .el-icon-s-operation {
        right: 30px;
        top: 30px;
        font-size: 18px;
        color: #727272;
        cursor: pointer;
      }

      .middle {
        display: flex;
        align-items: center;

        .progress {
          width: 120px;
          margin-left: 16px;
        }
      }
    }

    .exam_list {
      width: 100%;
      padding: 32px 64px;
      background: white;
      box-sizing: border-box;

      .answer_question {
        font-size: 14px;
        font-weight: 400;
        color: #333333;

        .item_answer {
          width: 100%;
          margin: 21px 0 41px;

          .textarea {
            width: 60%;
            font-size: 16px;
          }

          .attachment {
            width: 100%;
            padding: 25px 0 0;
            box-sizing: border-box;
            display: flex;

            &_sugest {
              font-size: 14px;
              font-weight: 400;
              color: #999999;
              margin-top: 16px;
            }

            .pictures {
              margin-left: 10px;
            }
          }
        }

        .question_type {
          color: #ef7d00;
        }
      }
    }
  }

  .answer_content {
    width: 1200px;
    border-radius: 16px;
    background: #ffffff;
    position: relative;

    .answer_sheet {
      width: 344px;
      height: calc(100vh - 134px);
      box-shadow: 0 6px 14px 0 rgba(0, 55, 49, 0.1);
      border-radius: 0 16px 16px 0;
      background: white;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;

      &_title {
        display: flex;
        justify-content: space-between;
        padding: 28px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #f2f3f4;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .sheet_question_list {
        height: calc(100vh - 215px);
        overflow: auto;
        padding: 32px 24px;
        box-sizing: border-box;
        background: white;

        .sheet_question_item {
          display: inline-block;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          margin-bottom: 12px;
        }
      }
    }

    &_top {
      border-radius: 16px 16px 0 0;
      border-bottom: 1px solid #f1f3f3;
      padding: 24px 460px 24px 24px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .el-icon-s-operation {
        font-size: 18px;
        color: #727272;
        cursor: pointer;
      }

      .middle {
        display: flex;
        align-items: center;

        .progress {
          width: 120px;
          margin-left: 16px;
        }
      }
    }

    .all_answer_connect {
      width: 850px;
      overflow: auto;

      .answer_list {
        width: 100%;
        padding: 32px 64px;
        background: white;
        box-sizing: border-box;

        .answer_question {
          font-size: 14px;
          font-weight: 400;
          color: #333333;

          .item_answer {
            width: 100%;
            margin: 21px 0 41px;

            .textarea {
              width: 60%;
              font-size: 16px;
            }

            .attachment {
              width: 100%;
              padding: 25px 0 0;
              box-sizing: border-box;
              display: flex;

              &_sugest {
                font-size: 14px;
                font-weight: 400;
                color: #999999;
                margin-top: 16px;
              }

              .pictures {
                margin-left: 10px;
              }
            }
          }

          .question_type {
            color: #ef7d00;
          }
        }
      }
    }

    /* 修改滚动条样式 .title_state为div盒子*/
    .all_exam_connect::-webkit-scrollbar {
      width: 6px;
      overflow-y: scroll;
      overflow-x: auto;
    }

    .all_exam_connect::-webkit-scrollbar-thumb {
      background: #e1e1e1;
      border-radius: 4px;
    }

    .all_exam_connect::-webkit-scrollbar-track {
      background: white;
    }

    .btns_operation {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 400px 32px 0;
      box-sizing: border-box;

      .operation_btn {
        width: 100px;
        height: 40px;
      }
    }
  }
}

.upload_btn {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;
}

.el-icon-plus {
  font-size: 18px;
  font-weight: bold;
  color: #999999;
}

.upload_txt {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
}

.paperTitle {
  font-size: 14px;
  font-weight: 500;
  color: #949494;
}

.paperTitle_left {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 16px;
}

.mt_10 {
  margin-top: 20px;
}

.sheet_answer_collect {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12px;

  &_item {
    cursor: pointer;
    user-select: none;
    margin: 0 10px 10px 0;
    width: 36px;
    height: 36px;
    background: #ffffff;
    color: #999999;
    border-radius: 50%;
    border: 1px solid #28b28b;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.optionItem {
  display: flex;
  align-items: center;
  margin: 10px 0;

  &_label {
    font-size: 14px;
    font-weight: 400;
    color: #a0a09f;
  }

  &_answer {
    width: 256px;
    margin-left: 11px;
  }
}

.selected {
  background: #daf1ff;
  color: #03c4ff;
  border: 0;
}

.fail_select {
  background: #ffcfce;
  color: #e95756;
  border: 0;
}

.color_red {
  color: red;
}

.color_green {
  margin-right: 40px;
  color: #09c1ae !important;
  cursor: pointer;
}

.color_aqua {
  color: #09c1ae !important;
  cursor: pointer;
}

.submited_state_top {
  border-radius: 16px 16px 0 0;
  padding: 16px 0;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .submited_img {
    width: 32px;
    height: 32px;
    object-fit: cover;
  }

  .submited_text {
    font-size: 18px;
    font-weight: 600;
    margin-left: 20px;
  }
}

.state_color_green {
  color: #28b28b;
}

.state_color_red {
  color: #d81e06;
}

.state_color_light_green {
  color: #19b300;
}

.bg_color_green {
  background: #cdf2ef;
}

.bg_color_red {
  background: #fbdddd;
}

.bg_color_light_green {
  background: #d2f2cd;
}

::v-deep .makeup_examination {
  width: 112px;
  height: 32px;
  background: #e95756 !important;
  border-radius: 20px !important;
  line-height: 12px;
  color: #ffffff;
}

::v-deep .el-statistic .con .number {
  font-size: 16px;
  margin-left: -14px;
}

.makeup_examination {
  position: absolute;
  right: 116px;
}

//checkBox自定义禁用样式
//::v-deep .el-checkbox__input.is-disabled + .el-checkbox__label {
//  color: #808080 !important;
//}
//
//::v-deep .el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
//  color: #1890ff !important;
//}
//
//::v-deep .el-checkbox__input .is-disabled .el-checkbox__inner {
//  background-color: #1890ff !important;
//  border-color: #1890ff !important;
//}
.el-icon-warning {
  color: #faad14;
  font-size: 24px;
  margin-right: 8px;
}

.toptip {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
}

.fail_answered {
  font-size: 14px;
  font-weight: 400;
  color: #e95756;
}

.right_answered {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 400;
}

.color_black {
  color: #333333;
  margin-left: 40px;
}

.view_img {
  width: auto !important;
  height: 90px;
  margin-left: 12px;
  margin-bottom: 12px;
  position: relative;
}

.view_img_url {
  width: auto !important;
  height: 100%;
}

.video_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;
}

.other_box {
  width: 90px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;

  .el-icon-document {
    font-size: 18px;
    color: #565656;
  }

  .other_text {
    margin-top: 10px;
    font-size: 12px;
    color: #565656;
    display: flex;
    align-items: center;

    span {
      display: inline-block;
      width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.video_img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  position: absolute;
}

.teacher_approval {
  display: flex;
  align-items: center;
}

.approval_radio {
  margin-top: 4px;
}

.remake {
  width: 100px;
}

.scoreget_label {
  margin: 0 6px 0 20px;
}

.teacher_approval_all {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.teacher_approval_remoke {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.remake_approval {
  width: 25%;
  font-size: 16px;
}

.resolve_exam {
  display: flex;
  margin-top: 10px;

  &_label {
    color: #333333;
    font-weight: bold;
  }

  &_value {
    color: #333333;
  }
}

.bg_orange {
  width: 100px;
  height: 32px;
  background: #fef4e9;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 16px;

  .countdown_img {
    width: 24px;
    height: 24px;
    object-fit: cover;
  }

  .countdown_txt {
    font-size: 14px;
    font-weight: 400;
    color: #ef7d00;
  }
}

/* 修改滚动条样式 .title_state为div盒子*/
.sheet_question_list::-webkit-scrollbar {
  width: 4px;
  overflow-y: scroll;
  overflow-x: auto;
}

.sheet_question_list::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border-radius: 4px;
}

.sheet_question_list::-webkit-scrollbar-track {
  background: white;
}

/* 修改滚动条样式 .title_state为div盒子*/
.all_exam_connect::-webkit-scrollbar {
  width: 6px;
  overflow-y: scroll;
  overflow-x: auto;
}

.all_exam_connect::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border-radius: 4px;
}

.all_exam_connect::-webkit-scrollbar-track {
  background: white;
}

.all_exam_connect {
  width: 100%;
  overflow: auto;
}

.topic_image {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
}

.upload_new {
  width: 90px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  cursor: pointer;
  margin-right: 12px;

  .el-icon-plus {
    font-size: 18px;
    font-weight: bold;
    color: #999999;
  }

  .upload_txt {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    user-select: none;
  }
}

.upload_way {
  width: 100%;
  padding: 56px 100px 78px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &_left {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
    align-items: center;

    .local_icon {
      width: 40px;
      height: 40px;
      background-image: url("./image/local_icon.png");
      background-repeat: no-repeat;
      background-position: 100% 100%;
    }

    .local_txt {
      width: 56px;
      height: 14px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin-top: 24px;
    }
  }

  &_left:hover {
    .local_icon {
      background-image: url("./image/local_hover_icon.png");
    }

    .local_txt {
      color: #28b28b;
    }

    &_right {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  &_right {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
    align-items: center;

    .local_icon {
      width: 40px;
      height: 40px;
      background-image: url("./image/camera_icon.png");
      background-repeat: no-repeat;
      background-position: 100% 100%;
    }

    .local_txt {
      width: 56px;
      height: 14px;
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      margin-top: 24px;
    }
  }

  &_right:hover {
    .local_icon {
      background-image: url("./image/camera_hover_icon.png");
    }

    .local_txt {
      color: #28b28b;
    }

    &_right {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.add_class {
  width: 680px;
  display: flex;
  flex-wrap: wrap;

  .view_img_local {
    width: auto;
    height: 90px;
    margin: 0 12px 12px 0;
    position: relative;
  }

  .local_img_url {
    width: auto;
    height: 100%;
  }

  .local_video_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    cursor: pointer;

    .video_img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      position: absolute;
    }
  }

  .local_other_box {
    width: 90px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
    cursor: pointer;

    .el-icon-document {
      font-size: 18px;
      color: #565656;
    }

    .other_text {
      margin-top: 10px;
      font-size: 12px;
      color: #565656;
      display: flex;
      align-items: center;

      span {
        display: inline-block;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .close_img {
    width: 16px;
    height: 16px;
    position: absolute;
    top: -4px;
    right: -4px;
    cursor: pointer;
  }
}

.photo_way {
  width: 100%;
  display: flex;

  &_left {
    width: 650px;
  }

  &_right {
    width: 302px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-left: 22px;

    .view_img_local {
      width: 80px;
      height: 45px;
      margin: 0 0 14px 20px;
      position: relative;
    }

    .local_img_url {
      width: 100%;
      height: 100%;
    }

    .recorded_video_box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f5f5f5;
      cursor: pointer;

      .video_img {
        width: 24px;
        height: 24px;
        object-fit: cover;
        position: absolute;
      }
    }

    .close_img {
      width: 16px;
      height: 16px;
      position: absolute;
      top: -4px;
      right: -4px;
      cursor: pointer;
    }
  }
}

.camera_outer {
  position: relative;
  overflow: hidden;
  background-size: 100%;

  video,
  canvas {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
  }

  video {
    border: 1px solid #e2e2e2;
  }

  .photo_btns {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 16px;

    .camera_photo_icon {
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/camera_icon.png");
    }

    .camera_photo_icon:hover {
      background-image: url("./image/camera_hover_icon.png");
    }

    .camera_shooting_icon {
      margin-left: 68px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/camera_shooting_icon.png");
    }

    .video_recording_icon {
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/video_recording_icon.png");
    }

    .video_recording_hover_icon {
      width: 40px;
      height: 40px;
      cursor: pointer;
      user-select: none;
      background-image: url("./image/video_recording_hover_icon.png");
    }

    .camera_shooting_icon:hover {
      background-image: url("./image/camera_shooting_hover_icon.png");
    }
  }
}

::v-deep .recordedVideo::-webkit-media-controls {
  transform: scaleX(-1); /* 在 WebKit 浏览器中翻转控制条 */
}

::v-deep .recordedVideo::-moz-media-controls {
  transform: scaleX(-1); /* 在 Firefox 浏览器中翻转控制条 */
}

::v-deep .recordedVideo::-ms-media-controls {
  transform: scaleX(-1); /* 在 Edge 浏览器中翻转控制条 */
}
.ml_0 {
  margin-left: 0 !important;
}
</style>
  